Blog - LINE ENGINEERING

TAG ARCHIVES: Web Development

전통적인 CMS에서 LandPress Content로 CMS를 옮기는 이유
윤혜린2023-08-03
LINE UIT 조직에서 LandPress Content 백엔드를 개발하고 있습니다.
LINE에서는 2년 전 기존 헤드리스 CMS의 구조와 성능을 개선한 새로운 헤드리스 CMS, LandPress Content를 사내 임직원 대상으로 출시했습니다. 그 후 전통적인 CMS를 사용하던 여러 LINE 서비스가 LandPress Content로 재개발되기 시작했는데요. 이번 글에서는 전통적인 CMS에서 헤드리스 CMS로 마이그레이션할 때 주의해야 할 점과 마이그레이션 후 어떤 점이 개선됐는지 살펴보겠습니다. 헤드리스 CMS가 등장한 배경 먼저 헤드리스 CMS가 등장한 배경을 살펴보겠습니다. 전통적인 CMS의 문제점 전통적인 CMS는 아래와 같이 프런트엔드와 백엔드가 결합된 구조로 한 몸처럼 작동합니다. 대표적으로 WordPress와 MovableType이 있습니다. 전통적인 CMS 구조 '프런트엔드와 백엔드를 함께 제공하다니 정말 편리하겠군요!'라고 생각하실 수 있는데요. 사실 사이트를 운영할 때 이와 같은 모놀리식(monolithic) 구조는 다음
- Web Development
서버 없이 웹 사이트 쉽게 만들기, LINE의 헤드리스 CMS
박광용2023-06-30
노 코드(no-code) 패러다임에 관심이 많고, 세상의 모든 불편함을 개발자들이 해결할 수 있다고 생각하며 열심히 개발자를 위한 도구를 만들어 나가고 있습니다.
Tech-Verse 2022에서 박광용 님이 발표한 Headless CMS in LINE 세션 내용을 옮긴 글입니다. 안녕하세요. 노 코드(no-code) 패러다임에 관심이 많고, 개발자를 편하게 만드는 기술을 좋아하며, LINE에서 서버 엔지니어로 일하고 있는 박광용입니다. 이번 글에서는 백엔드 개발 없이 프런트엔드 개발만으로 동적 웹페이지를 제작할 수 있는 헤드리스 CMS를 소개하려고 합니다. 프런트엔드 기술로만 만든 Tech-Verse 웹사이트 작년에 LINE에서 개최한 기술 콘퍼런스 Tech-Verse의 웹사이트는 서버 개발자 없이 프런트엔드 개발자만 모여서 만들었습니다. 서버와 데이터베이스 없이 개발한 것인데요. 헤드리스(headless) CMS(content management system)를 이용하면 프런트엔드 기술만으로 웹사이트를 개발할 수 있습니다. 헤드리스 CMS를 이용하기 전에는, 데이터 파일에 사이트 정보를 저장하고 React 프레임워크에서 데이터
- Web Development
Vue 컴포넌트 - 메모리 누수 분석하기
임초이2022-01-11
LINE+ UIT 조직에서 FE 개발자로 일하고 있습니다.
안녕하세요. LINE+ UIT 프런트엔드 개발자 임초이입니다. 최근 웹 뷰에서 메모리 누수 때문에 앱이 크래시되는 문제가 발생했습니다. 처음 접해보는 메모리 누수라 많이 헤맸지만, 원인을 찾아 문제를 해결할 수 있었는데요. 이번 글에서는 메모리 누수가 무엇인지와 메모리 누수를 해결하기 위한 접근법에 대해 이야기해 보겠습니다. 초보자 관점에서 기초부터 차근차근 접근해 보려고 합니다 :) 환경: Vue 프레임워크를 사용한 SPA(single page application) 프로젝트 문제: 라우터 전환 시 특정 Vue 컴포넌트에서 메모리가 반환되지 않아 메모
- Web Development
LINE Web Timeline 이미지 얼굴 인식 기능 적용
이상원, 김은재2021-10-21
LINE에서 프론트엔드 업무를 담당하고 있습니다 / LINE에서 UI 개발을 담당하고 있습니다
안녕하세요. 저희는 LINE UIT 조직에서 프런트엔드 업무를 담당하고 있는 김은재, 이상원입니다. 이번 글에서는 저희가 LINE Web Timeline에서 얼굴 인식을 통해 전달받은 좌표를 CSS로 표현하기 위해 고민했던 내용을 공유하려고 합니다. 프런트엔드 개발을 진행하다 보면 CSS를 사용하면서도 막상 그 스펙을 깊이 이해하지 못하고 사용하게 되는 경우가 종종 있습니다. 이번 작업을 담당하며 그동안 공부가 부족했다는 것을 통감했는데요. CSS를 이해하면 할수록 브라우저에서 CSS를 구현하기 위해 얼마나 많은 고민이 필요한지 깊이 공감하게 되었습니다. 글은 다음과 같은 순서로 진행합니다. 배경 설명 구현 과정 중심 좌표 산출 CSS image-size 표현 방식 정의 중심 좌표를 CSS로 구현 이미지를 9분할해 position 클래스 분기 처리 픽셀을 사용한 position
- Web Development
결제 제휴를 통해 보다 편하게 결제할 수 있는 세상 만들기
서동규2021-09-15
LINE DEVELOPER DAY 2020에서 서동규 님이 발표하신 Create a more convenient payment world through a payment alliance 세션 내용을 옮긴 글입니다. 안녕하세요. 이번 글에서는 '좀 더 편한 결제 세상 만들기'라는 주제로 LINE Pay의 크로스 보더(cross border) 결제 기능을 소개하겠습니다. 먼저 LINE Pay가 지향하는 크로스 보더 결제의 모습과 그동안의 결과물을 소개한 뒤, LINE Pay의 크로스 보더 결제 플랫폼에서 중요한 역할을 담당하는 두 가지 시스템과 각 시스템의 구조에 대해서 말씀드리겠습니다. 마지막으로 LINE Pay가 앞으로 강화하고자 하는 LINE Pay의 서비스와 그 이유를 말씀드리면서 글을 마무리하겠습니다. 기술 관련 내용보다는 경험 위주의 내용이니 편하게 읽어
LINE에서 하루 만에 정적 웹 페이지 개발해서 배포하는 방법
편해걸2021-06-18
LINE DEVELOPER DAY 2020에서 편해걸 님이 발표하신 How to quickly develop static pages in LINE 세션 내용을 옮긴 글입니다. 안녕하세요. 이번 글에서는 정적(static) 웹 페이지를 빠르게 개발하는 방법에 대해서 이야기하려고 합니다. 개발에서 빌드, 배포까지 하루 만에! 시작하기에 앞서 여러분들께 한 가지 질문을 드리겠습니다. 아래 보이는 화면은 LINE에서 최근에 진행했던 이벤트 페이지입니다. 언뜻 보시기에 이 페이지를 만드는 데 대략 얼마나 걸렸을 것이라고 예상하시나요? 같은 질문을 주위 개발자분들에게도 물어보았습니다. 대부분 3일에서 5일 정도 걸릴 것 같다고 답변해 주셨는데요. 실제로 이 이벤트 페이지를 개발한 엔지니어는 단 하루 만에 개발에서 빌드, 배포까지 마무리하셨습니다. 어떻게
- Web Development
Sentry로 사내 에러 로그 수집 시스템 구축하기
복다훈2021-04-22
LINE DEVELOPER DAY 2020에서 복다훈 님이 발표하신 Story that built Sentry as an On-Premise 세션 내용을 옮긴 글입니다. 안녕하세요. LINE Plus UIT 팀 복다훈입니다. 이번 글에서는 Sentry 온 프레미스(On-Premise) 구축기를 공유하겠습니다. LINE에서 왜 Sentry를 사용하게 됐는지 먼저 말씀드리고 클라우드 대신 온 프레미스 방식으로 구축하게 된 이유를 설명한 뒤 마지막으로 어떻게 구축했는지 말씀드리겠습니다. 기존 에러 로그 수집 플랫폼의 문제점 기존에 사용하던 에러 로그 수집 플랫폼은 프런트엔드에 친화적이지 않았습니다. 아래 예시 화면을 보시겠습니다. 위 화면에 보이는 에러는 undefined 값에서 'featureID'라는 프로퍼티
- Web Development
LINE의 웹 기반 서비스와 기술 - LINE은 앱 만드는 회사 아닌가요?
허석2019-09-30
I'm a web developer loves who the universe. Want to wake up a sleeping Opportunity(Mars Rover).
안녕하세요. LINE에서 웹 서비스를 개발하고 있는 허석입니다. 오늘은 LINE에서 웹을 기반으로 하는 여러 서비스에 대해 설명을 드리고, 각 서비스를 어떤 아키텍처나 기술 스택, 방법으로 만들고 있는지를 소개하겠습니다. 소개하기 위해 LINE의 웹 기반 서비스를 웹 서비스, 하이브리드 웹 앱, 메신저, 라이브러리 & 플랫폼으로 분류해 봤습니다. 각 분류별 서비스 소개 웹 서비스 - LINE 타임라인 웹 LINE 타임라인 웹은 텍스트나 사진, 동영상 등으로 자신의 소식을 친구들에게 공유하거나 친구들이 공유한 소식을 확인할 수 있는 소셜 서비스입니다. 현재 7개 언어로 글로벌하게 운영되고 있습니다. 아래 이미지의 오른쪽이 글쓰기 화면입니다. 웹에서 실제로 어떤 스티커를 전송하거나 링크를 공유하고, 텍스트를 애니메이션으로 처리해서 보여줄 수도 있는 서비스인데요. 여기서 작성하면 모바일과 웹에서 동일하게 보입니다. 아래는 LINE 타
- Web Development
JavaScript SDK 성능개선 방법 - 압축과 최적화로 실행시간 단축하기
이재호2019-08-29
Game Platform Dev에서 QUICK Game Service를 운영하고 있습니다.
안녕하세요. 저는 QUICK Game Platform Dev 팀에서 게임에서 필요한 여러 기능을 제공하는 QUICK Game SDK를 개발하고 있는 이재호입니다. QUICK Game Platform이란 HTML5 기반의 게임을 서비스하기 위해 LINE에서 제공하는 플랫폼입니다. 저는 이번 글에서 QUICK Game SDK를 개발하고 개선하면서 SDK의 크기를 줄이고 성능을 개선했던 사례를 공유하려고 합니다. 환경 실험은 다음과 같은 환경에서 진행되었습니다. Dependency 모듈명 버전 devDependencies webpack 4.28.2 devDependencies @babel/core 7.4.3 devDependencies @babel/cli 7.4.3 devDependencies babel-loader 7.1.5 devDependencies mini-css-extract-plugin 0.7.
- Web Development
프론트엔드 개발자의 LINE 입사 후기
송헌용2019-06-12
자바스크립트로 웹앱을 개발하고 있습니다.
안녕하세요! LINE의 UIT(User Interface Technology) 팀에서 프론트엔드 개발을 하는 송헌용입니다. 뒤돌아보니 LINE에 입사한 지 벌써 8개월이나 지났더라고요. 그래서 지난 8개월 동안 제가 LINE에서 어떻게 지냈는지 되돌아보는 시간을 가져보았습니다. 입사 후기 겸 회고록이라고 할까요. 저는 개발자로 일한 지 올해로 5년 차가 되었고, 그동안 주로 프론트엔드 개발을 담당했습니다. 예전에는 PC용 웹 애플리케이션을 많이 개발했는데요. LINE에서 일하면서 모바일 개발에 더욱 집중하게 되었습니다. 예전에도 나름대로 최적화에 신경쓴다고 생각하며 개발했지만, 이제와 돌이켜보니 부족한 부분이 있었던 것 같습니다. 한국은 인터넷 속도가 빨라서 네트워크 병목 현상으로 렌더링이 느려지는 일은 흔치 않기 때문에 자연스럽게 그런 측면에서의 최적화를 간과하며 개발했던 것 같습니다. 반면, LINE에서 제공하는 서비스는
- JavaScript
- Web Development

1 2